<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Tweet Active:RealTimeTweet</title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css"/>
        <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/dom/dom-min.js"></script>
        <script src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
        <script src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/get/get-min.js" ></script>
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="alternate" type="application/x-cooliris-quick" href="http://www.tweetactive.com/images/cooliris-quick.xml" />
        <style type="text/css">
                        #pane1 a:link,a:visited, #pane2 a:link,a:visited
                        {
                            color: #666666;
                        }
                        #pane1 a:link:hover, #pane2 a:link:hover
                        {
                            color: #111111;
                        }
                        body, html {
                            background: #e0e0e0;
                            color: #000;
                        }
                        #page_title {
                            font-size: 48px;
                            color:#2222ff;
                            font-family: 'Arial Rounded MT Bold';
                        }
                        #tweet_list {
                            font-size: 28px;
                            color:#909090;
                            font-family:Times;
                        }
                        #trend_list
                        {
                            width:auto;
                            height:auto;
                            font-size: 28px;
                            color:#2222ff;
                            font-family:Times;
                            overflow: hidden;
                        }
                        .me
                        {
                            color:#CC9900;
                            font-size:28px;
                            font-family:'Arial Rounded MT Bold';
                        }
                        .displayed,.yui-g
                        {
                            width:auto;
                            height:auto;
                            font-size: 18px;
                            color:#909090;
                            font-family:Times;
                            overflow: hidden;
                        }
        </style>
        <link rel="stylesheet" href="./style/main.css" type="text/css">
        <script type="text/javascript" language="JavaScript">
            var KeyWord='';

            var RealKeywordDisplay=
                {
                /*callbacks : {
                success : function (o) {
                    // Process the JSON data returned from the server
                    var values = [];
                    try {
                        values = YAHOO.lang.JSON.parse(o.responseText).ResultSet.Result;
                    }
                    catch (e) {
                        return;
                    }
                   RealKeywordDisplay.disp(values);
                },

                failure : function (o) {
                    if (!YAHOO.util.Connect.isCallInProgress(o)) {
                    }
                },

                timeout : 3000
               },*/
                currentpane:1,
                setvisible:function(id,visible)
                {
                    ele=document.getElementById(id);
                    if(visible){
                        myAnim = new YAHOO.util.Anim(id, {
                            width: {from:900, to: 900 },
                            height: { to:400 },
                            opacity: {from: 0, to: 1 }
                        }, 1, YAHOO.util.Easing.easeIn);
                        myAnim.anim
                        ele.className="displayed";
                        myAnim.animate();
                    }
                    else{
                        var myAnim = new YAHOO.util.Anim(id, {
                            width: {from:0, to: 0 },
                            height: { to:0 },
                            opacity: {from: 1, to: 0 }
                        }, 1, YAHOO.util.Easing.easeIn);
                        myAnim.animate();

                    }

                },
                getfreepane:function()
                {
                    if(this.currentpane==1)
                    {

                        var cur_pane= document.getElementById("pane1");
                        this.setvisible("pane1", false);
                        this.currentpane=2;
                        cur_pane= document.getElementById("pane2");
                        this.setvisible("pane2", true);
                        return cur_pane;
                    }
                    else
                    {
                        var cur_pane= document.getElementById("pane2");
                        this.setvisible("pane2", false);
                        this.currentpane=1 ;
                        cur_pane= document.getElementById("pane1");
                        this.setvisible("pane1", true);
                        return cur_pane;
                    }
                }
                ,
                URLEncode: function(clearString) {
                    var output = '';
                    var x = 0;
                    clearString = clearString.toString();
                    /*text=text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');*/
                    clearString=clearString.replace(/&lt;.+?&gt/g,'');
                    var regex = /(^[a-zA-Z0-9_.]*)/;
                    while (x < clearString.length) {
                        var match = regex.exec(clearString.substr(x));
                        if (match != null && match.length > 1 && match[1] != '') {
                            output += match[1];
                            x += match[1].length;
                        } else {
                            if (clearString[x] == ' ')
                                output += '+';
                            else {
                                var charCode = clearString.charCodeAt(x);
                                var hexVal = charCode.toString(16);
                                output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
                            }
                            x++;
                        }
                    }
                    return output;
                }
                ,
                seedscript:function(source_url){
                    var scrpt_div = document.getElementById("MYSCRIPTS");
                    scrpt_div.innerHTML = "";
                    var scrpt_ele = document.createElement("script");
                    scrpt_ele.src = source_url;
                    scrpt_div.appendChild(scrpt_ele);
                }
                ,
                chart_color:["#802B00","#806A00","#2B0080","#6A0080","#558000","#7C00DB","#336699","#88C700","#999933","#CC9900"],
                timer_tick:function()
                {
                    RealKeywordDisplay.fake_counter=RealKeywordDisplay.fake_counter+1;
                    var url="http://search.twitter.com/search.json?q="+RealKeywordDisplay.URLEncode(KeyWord);
                    RealKeywordDisplay.seedscript(url+"&callback=RealKeywordDisplay.disp&fakecount="+RealKeywordDisplay.fake_counter);
                    //YAHOO.util.Get.script(url, RealKeywordDisplay.callbacks);

                },
                setcustom:function()
                {
                    var text=document.getElementById("txtkeyword").value;

                    text=text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');

                    RealKeywordDisplay.ChangeQuery(text);
                    //document.getElementById("txtkeyword").value="";
                },
                ChangeQuery:function(query)
                {
                    KeyWord=query;
                    var div_title=document.getElementById("title");
                    div_title.innerHTML="<h2>RealTime Tweet:<span>&nbsp;"+KeyWord+"</span></h2>";
                    RealKeywordDisplay.timer_tick();
                },
                trend_disp:function(data)
                {
                    RealKeywordDisplay.chart_color.sort(function() {return 0.5 - Math.random()});
                    var tl=document.getElementById("trend_list");
                    var html="";
                    for(var i=0;i<data.trends.length;i++)
                    {
                        var link_tag='<a style=\"text-decoration:none\" href=\"javascript:RealKeywordDisplay.ChangeQuery(\''+data.trends[i].name+'\')\">';
                        var font_start_tag="<font color=\""+RealKeywordDisplay.chart_color[i%RealKeywordDisplay.chart_color.length] +"\">";
                        var tweet=data.trends[i].name
                        html=html+link_tag+font_start_tag+tweet+"</font>"+"</a>&nbsp";

                    }
                    tl.innerHTML=html;
                    RealKeywordDisplay.timer_tick();
                },
                navigate_link:function(in_link)
                {
                    if(in_link.match(/#[A-Za-z0-9_]+/))
                    {
                        RealKeywordDisplay.ChangeQuery(in_link);
                    }
                    else if(in_link.match(/(http:\/\/[A-Za-z0-9\/\.\+\-]+)/))
                    {
                        window.open(in_link);
                    }
                    else if(in_link.match(/@[A-Za-z0-9_]+/))
                    {
                        window.open("http://www.twitter.com/"+in_link.substring(1));
                    }
                },
                fake_counter:0,
                get_trend_list:function()
                {
                    this.fake_counter=this.fake_counter+1;
                    var url="http://search.twitter.com/trends.json"+"?callback=RealKeywordDisplay.trend_disp&fake_count="+RealKeywordDisplay.fake_counter;
                    this.seedscript(url);
                },
                get_anchor_link: function(){
                    //alert(RealKeywordDisplay.cur_color);
                    var link_tag='<a style=\"text-decoration:none\" href=\"javascript:RealKeywordDisplay.navigate_link(\''+'$1'+'\')\">';
                    var font_tag="<font color=\""+RealKeywordDisplay.cur_color+"\">";
                    var endtag="</font></a>";
                    return link_tag+font_tag+'$1'+endtag;
                },
                cur_color:"#802B00",
                getHTML:function(data)
                {

                    var html="";
                    for(var i=0;i<data.results.length;i++)
                    {
                        RealKeywordDisplay.cur_color=RealKeywordDisplay.chart_color[i%RealKeywordDisplay.chart_color.length];

                        var font_start_tag="<font color=\""+ RealKeywordDisplay.cur_color + "\">";
                        /*var img_tag="<img src=\""+data.results[i].profile_image_url+"\"/>"*/
                        var user_tag='<a style=\"text-decoration:none\" href=\"javascript:RealKeywordDisplay.navigate_link(\'@'+data.results[i].from_user+'\')\">'+data.results[i].from_user+":</a>";
                        var tweet=data.results[i].text
                        /*'g' at the end of the regex is to indicate
                         *global replace i.e replace all occurance
                         *
                         *DO NOT MESS WITH THE ORDER OF REPLACEMENTS*/
                        var tweet_strip_link=tweet.replace(/(http:\/\/[A-Za-z0-9\/\.\+\-]+)/g,RealKeywordDisplay.get_anchor_link());
                        var tweet_strip_hastag=tweet_strip_link.replace(/ (#[A-Za-z0-9_]+)/g,' '+RealKeywordDisplay.get_anchor_link());
                        var tweet=tweet_strip_hastag.replace(/(@[A-Za-z0-9_]+)/g,RealKeywordDisplay.get_anchor_link());
                        if(tweet.length>5)
                        {
                            html=html+user_tag+font_start_tag+tweet+"</font><br>";
                        }

                    }
                    return html;
                },
                cur_tweet_id:0,
                disp:function(data)
                {
                    var html=RealKeywordDisplay.getHTML(data);
                    if((!data.results[0])){return};
                    if(RealKeywordDisplay.cur_tweet_id!=data.results[0].id){
                        var tl=this.getfreepane();
                        RealKeywordDisplay.chart_color.sort(function() {return 0.5 - Math.random()});
                        tl.innerHTML=RealKeywordDisplay.getHTML(data);
                        RealKeywordDisplay.cur_tweet_id=data.results[0].id;
                    }

                },
                DoReload:function()
                {
                    window.location.reload();
                },
                launch:function()
                {
                    var div_title=document.getElementById("title");
                    KeyWord=div_title.getElementsByTagName('span')[0].innerHTML;
                    div_title.innerHTML="<h2>RealTime Tweet:<span>&nbsp;"+KeyWord+"</span></h2>"
                    setInterval(RealKeywordDisplay.timer_tick,8000);
                    setInterval(RealKeywordDisplay.DoReload,1200000);
                    this.get_trend_list();
                }
            }

        </script>
    </head>
    <body onload="RealKeywordDisplay.launch()">
        <div id="doc2" class="yui-t7">
            <div id="hd" role="banner"><a href="./"><h1>Tweet<span>Active</span></h1></a></div>
            <div id="seperator"></div>
            <div id="bd" role="main">
                <div class="yui-g">
                    <div id="title"><h2>RealTime Tweet: &nbsp;<span>{{oscars|escape}}</span></h2></div>
                    <div id="trend_list">
                        {{TRENDLIST}}
                    </div>
                    <div>
                        <form  action="javascript:RealKeywordDisplay.setcustom()">
                            <input id="txtkeyword" type="text"></input>
                            <input type="submit" onclick="RealKeywordDisplay.setcustom()" value="search"></input>
                        </form>
                    </div>
                </div>
                <div class="yui-g">
                    <div>
                        <div class="yui-g" id="pane1" style="width:900px">
                            {{TWEETS}}
                        </div>
                        <div class="yui-g" id="pane2" style="width:0px">
                        </div>
                    </div>
                    <div id="MYSCRIPTS">
                    </div>
                    <div class="yui-g">
                        <div><a href="/feedback">Feedback</a></div>
                    </div>
                </div>
                <div id="seperator"></div>
                <div id="ft" role="contentinfo"><p>Mashup by: <a href="http://www.twitter.com/markandey">Markandey</a></p></div>
                <div>
                    <a href="http://code.google.com/appengine/">
                    <img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif"
                         alt="Powered by Google App Engine" /></a>
                    <a href="http://apiwiki.twitter.com/"><img src="http://search.twitter.com/images/powered-by-twitter-sig.gif?1220915084"
                         alt="Powered by Twitter Search API" /></a>
                </div>
                <div>
                <script type="text/javascript"><!--
                    google_ad_client = "pub-4399838251921825";
                    /* tweetactive hawai */
                    google_ad_slot = "1825209420";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    //-->
                    </script>
                    <script type="text/javascript"
                    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>
                </div>
                <script type="text/javascript">
                    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                </script>
                <script type="text/javascript">
                    try {
                        var pageTracker = _gat._getTracker("UA-109368-4");
                        pageTracker._trackPageview();
                    } catch(err) {}
                </script>
            </div>
        </div>
        <script type="text/javascript">
            var uservoiceJsHost = ("https:" == document.location.protocol) ? "https://uservoice.com" : "http://cdn.uservoice.com";
            document.write(unescape("%3Cscript src='" + uservoiceJsHost + "/javascripts/widgets/tab.js' type='text/javascript'%3E%3C/script%3E"))
        </script>
        <script type="text/javascript">
            UserVoice.Tab.show({
                key: 'tweetactive',
                host: 'tweetactive.uservoice.com',
                forum: 'general',
                lang: 'en'
            })
        </script>
    </body>
</html>

